<template>
    <div id="app" class="wrapper">
        <img class="wrapper__img" src="./images/user.png" alt="user"/>
        <div class="wrapper__input">
            <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名"/>
        </div>
        <div class="wrapper__input">
            <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码"/>
        </div>
        <div class="wrapper__loginButton" v-on:click="Login">登陆</div>
        <div class="wrapper__register">
            <span>立即注册</span>
            <div class="seperator"></div>
            <span>忘记密码</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userName: '',
            password: ''
        }
    },
    methods: {
        Login() {
            console.log(this.userName, this.password);
            if (this.userName.length > 0 && this.password.length > 0) {
                alert(`用户名: ${this.userName} 密码: ${this.password}`);
            } else {
                alert("请输入用户名密码");
            }
        }
    }
}
</script>

<style scoped>
/* 在此处添加样式（从 login.css 中提取样式） */

</style>
